<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="org.ocpsoft.pretty.time.PrettyTime"%>
<%@page import="java.util.Date"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />

<link href="${pageContext.request.contextPath}/css/CommentPanel.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/DialogPanel.css" rel="stylesheet" type="text/css" />
<%-- <link href="${pageContext.request.contextPath}/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" /> --%>
<%-- <link href="${pageContext.request.contextPath}/css/datepicker/jquery-ui-1.8.21.custom-redmond.css" rel="stylesheet" type="text/css" /> --%>

<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/gettheme.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/gcCalendarPopup.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/textboxes.js"></script>

<!-- DropdownChecklist -->
<link href="${pageContext.request.contextPath}/css/ui.dropdownchecklist.themeroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/ui.dropdownchecklist-1.4-min.js"></script>
<!-- End dropdownChecklist -->
<style type="text/css">
	/*css for line height: custom height of dorpdown check list*/
	.line {line-height: 15px;}
</style>
<script>
	function confirmDelete(delUrl) {
		if (confirm("Are you sure you want to delete?")) {
			document.location = delUrl;
		}
	}
</script>

<!-- CK editor for more option -->
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
   Wicket.Event.add(window,"domready",function(event) {
      $('#topicCommentContent').tinymce({
            script_url : '${pageContext.request.contextPath}/scripts/tiny_mce/tiny_mce.js',
            theme : "advanced",
            auto_resize : "true",
            relative_urls : false,
            verify_html : false,
            width : "97%",
            height: '200',
            plugins : "safari,style,layer,emotions,iespell,paste,xhtmlxtras",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,paste,pastetext,pasteword,|,bullist,numlist,|,emotions",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_resizing : false
      });
   });
</script>
<!-- End CK editor for more option -->

<input name="topicID" id="topicID" type="hidden" value=${topic.id }>

<div class="cubeTitleWrapper">
      <span class="cube_title">SharedWorkspaces</span> <span class="wklinks"> <span class="settings"><a
            href="">Settings</a></span>
      </span>
</div>

<div class="cube">
	<div>
		<div class="contentwrapper">
			<div class="contentcolumn">
				<div class="innertube">
					<div>
						<h2 class="userDefinedBg">
							<span class="right_end" style="text-align: center;">
						<a style="float: left; color: white; font-weight: bold; font-size: 13px;" href="${pageContext.request.contextPath}/discussion">
							Forum
						</a>
						<span style="float: left;">&nbsp;>>&nbsp;</span>
						<a style="float: left; color: white; font-weight: bold; font-size: 13px;" href="${pageContext.request.contextPath}/box/${forum.id}/view">
							${forum.name }
						</a>
						<span style="float: left;">&nbsp;>>&nbsp;</span>
						<a style="float: left; color: white; font-weight: bold; font-size: 13px;" href="${pageContext.request.contextPath}/topic/${topic.id}/view">
							${topic.title }
						</a>
						</span>
						
						</h2>
					</div>
					<div class="contentBlock">
						<br>
						<div class="commentContainer commentContainer_hover">
							<div>
								<a class="profileThumb" href=""> <span class="thumbmask">
										<span class="topleft"></span> <span class="topright"></span> <span
										class="bottomleft"></span> <span class="bottomright"></span> <img
										id="profileImgf6"
										src="${pageContext.request.contextPath}/images/default_profile.png">
								</span>
								</a>
							</div>
							<div class="commentContainer_text">
								<div class="commentContainer_arrow"></div>
								<span class="author">${topic.user.username }</span> <span></span>
								<c:set var="createdDate" value="${topic.createdDate.getTime()}"></c:set>
								<span class="date"><%=new PrettyTime().format((Date) pageContext.getAttribute("createdDate"))%></span>
								<p class="commentContainer_text_comment"></p>
								<p>${topic.content }</p>
								<p></p>
								<div class="corner corner_nw"></div>
								<div class="corner corner_ne"></div>
								<div class="corner corner_se"></div>
								<div class="corner corner_sw"></div>
							</div>
						</div>
						<div id="pollContainerf7"></div>
						<div class="spacer">&nbsp;</div>
						<div>
							<div class="CommentPanel" id="commentContainerf8">
								<div id="topicCommentList">
									<%@include file="controls/c_discussionComments.jsp"%>
								</div>

								<div class="line" style="margin-top: 10px;">

									<span
										style="text-align: left; margin-left: 5px; font-size: 16px; font-weight: bold;">Put
										your comment here</span>
								</div>
								<div class="line"
									style="border-bottom: none; margin-bottom: 10px;">
									<div class="T1" style="width: 10%;">
										<a href="hoso.html"><img
											src="${pageContext.request.contextPath}/images/anne.png"
											width="30" height="30" style="border: none;" /></a>
									</div>
									
									<div class="T2" style="width: 90%;">

										<div id="feedbackAddComment" style="width: 97%; line-height:15px; display: none;">
											<ul class="feedbackPanel">
												<li class="feedbackPanelERROR"><span
													class="feedbackPanelERROR">Comment is required</span></li>
											</ul>
										</div>
										<div class="line" style="border-bottom: none">
											<textarea id="topicCommentContent"
												style="width: 90%; height: 100px;"></textarea>
										</div>
										<div class="addArea" style="width: 90%; text-align: left;">
											<a id="commentSubmit" style="display: none;"></a>

											<script type="text/javascript">
												function addTopicComment() {
													var topicID = document.getElementById("topicID").value;
													var content = $('#topicCommentContent').val().trim();
													if (content == "") {
														$('#feedbackAddComment').fadeIn(500);
													} else {
														$.ajax({
															url : '${pageContext.request.contextPath}/ajax/topic/addComment',
															type : "POST",
															data : {
																topicID : topicID,
																content : content
															},
															dataType : "html",
															beforeSend : function() {
																$('#imgAddComment').show();
																//$('#topicCommentList').fadeOut();
															},
															complete : function() {
																$('#imgAddComment').hide();
																//$('#topicCommentList').fadeIn();
															},
															success : function(data) {
																$('#feedbackAddComment').fadeOut(500);
																$('#topicCommentList').html(data);
																$('#topicCommentContent').val("");
															},
															error : function() {
																alert("Failure args: "+ arguments);
															}
														});
														$('#feedbackAddComment').fadeOut(500);
													}
												}
											</script>

											<a style="color: rgb(72, 157, 212);" class="gcSubmit" id="commentSubmitAjax"	onclick="addTopicComment();"> Submit <span class="left"></span>
												<span class="right"></span>
											</a> <img id="imgAddComment" style="display: none;"
												src="${pageContext.request.contextPath}/images/throbber.gif">
											<span style="margin-top: 10px; top: -3px;">Notify by
												email</span>

											<!-- Chưa thêm dropdownlist check -->
											<span style="padding-top: 7px;"> <script type="text/javascript">
												$(document).ready(function() {
													$("#s89").dropdownchecklist({
														firstItemChecksAll : true,
														emptyText : "Select...",
														width : 150
													});
												});
											</script> <select id="s89" class="s8" multiple="multiple"
												style="font-size: 7px;">

													<option value="0">All</option>
													<c:forEach items="${userlists }" var="user">
														<option value="${user.id }">${user.username }</option>
													</c:forEach>

											</select>

											</span> <input id="parentComment" value="" name="parentComment"
												type="hidden"> <span style="display: none"
												id="showAreaAdd1b2"><img
												src="task-detail_files/throbber.gif"></span>

										</div>


									</div>
								</div>

							</div>
						</div>
						<div class="spacer"></div>
					</div>
					<div class="contentBlock_bottom">
						<span class="right_end"><span></span></span>
					</div>
				</div>
			</div>
		</div>
		<div class="rightcolumn" style="float: right;">
			<div class="innertube">
				<h2 class="userDefinedBg">
					<span class="right_end"><span class="start">Tools for
							topic</span></span>
				</h2>

				<div class="contentBlock">
					<ul class="toolbox userDefinedColor">
						<li class="userDefinedBg"><a class="add_link announcement"
							style="background: url(${pageContext.request.contextPath}/images/btn_icon_itemedit.png) no-repeat 5px 50%;"
							href="${pageContext.request.contextPath}/topic/${topic.id}/edit">Edit</a></li>
						<li class="delete">
						<a class="add_link delete"							
							href="javascript:confirmDelete('${pageContext.request.contextPath}/topic/${topic.id}/delete')">Delete</a></li>
					</ul>
					<div class="spacer"></div>
				</div>
				<div class="contentBlock_bottom">
					<span class="right_end"><span></span></span>
				</div>
			</div>
		</div>
	</div>
</div>

